.site-popover-wrapper {
  &-header {

  }
  &-body {
    .hero-social-wechat {
      img {
        width: 10rem;
      }
    }
    .site-popover-wrapper-share {
      list-style: none;
      padding: .5rem 0;
      margin-bottom: 0;
      li {
        padding: 0;
        a {
          position: relative;
          padding: 0.5rem;
          margin: 0 .25rem;
          border-radius: 5px;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          color: #fff;
          &.share-weibo {
            background-color: #e24040;
          }
          &.share-qq {
            background-color: #3d93e0;
          }
          &.share-wechat {
            background-color: #20b767;
            & + .post-share-wechat-qr {
              display: none;
            }
            &:hover + .post-share-wechat-qr {
              display: flex;
              position: absolute;
              width: 100%;
              left: 0;
              text-align: center;
              align-items: center;
              justify-content: center;
              margin-top: 1.5rem;
              padding: 1rem;
              animation: slide-down 250ms ease-out;
            }

            @keyframes slide-down {
              0% {
                opacity: 0;
                transform: translateY(10%);
              }
              100% {
                opacity: 1;
                transform: translateY(0);
              }
            }
          }
          &.share-twitter {
            background-color: #1da1f2;
          }
          &:hover {
            color: #fff;
            i {
              transition: all 500ms ease 0ms;
              transform:rotate(15deg);
            }
          }
          i {
            font-size: 1.25rem;
          }
        }
      }
    }
  }
}

@mixin dark-mode {
  .site-popover-wrapper {
    background-color: $dark-skeleton-color;
    .arrow {
      &:after {
        border-bottom-color: $dark-skeleton-color;
      }
    }
    &-share {
      li {
        a {
          color: $dark-main-color;
          &:hover {
            color: $dark-main-color;
          }
        }
      }
    }
  }
}

@media (prefers-color-scheme: dark) {
  @include dark-mode;
}

[data-theme="dark"] {
  @include dark-mode;
}
